<!DOCTYPE html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html">
    <title>Timeglider jQuery Plugin</title>
    <!--<demo>https://www.jq22.com/demo/timeglider-jquery-150121224631/</demo>-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">

    <link rel="stylesheet" href="css/aristo/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">

    <link rel="stylesheet" href="js/timeglider/Timeglider.css" type="text/css" media="screen" title="no title" charset="utf-8">


    <style type="text/css">

        body {
            font-family: Helvetica, Arial, sans-serif;
        }

        h2 {
            margin-left:32px;
        }
        #p1 {
            margin:32px;
            margin-bottom:0;
            height:500px;
        }

        #output {
            font-size:10px;
        }

        .shadow-years .timeglider-event-title {
            color:#F0F0F0;
        }
        .shadow-years .timeglider-event-spanner {
            background-color:#4C5408;
        }

        .bibliocene .timeglider-event-title {
            color:#F0F0F0;
        }
        .bibliocene .timeglider-event-spanner {
            background-color:orange;
        }

        .js-era .timeglider-event-title {
            color:#323230;
        }
        .js-era .timeglider-event-spanner {
            background-color:#f0db4e;
        }


        .hawt .timeglider-event-title {
            color:white;
        }
        .hawt .timeglider-event-spanner {
            background-color:#CC106B;
        }

        .browserwars .timeglider-event-title {
            color:black;
        }
        .browserwars .timeglider-event-spanner {
            background-color:#CC0000;
        }

        .inception .timeglider-event-title {
            color:green;
        }
        .inception .timeglider-event-spanner {
            background-color:white;
        }



        .tg-timeline-envelope .titleBar {
            opacity:.2;
        }


    </style>
</head>
<body>


<h2>A timeline of Javascript's historical context</h2>
<div id="p1" class="ui-resizable">
</div>
<br><br>你可以在这里看到我关于Lambda演算和其他Javascript“DNA”的幻灯片</p>

<!--
<div id='output'>...</div>
-->


<!-- 3rd party libs -->

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

<!--
<script src="js/timeglider-0.1.3.min.js" type="text/javascript"></script>
-->

<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-debug.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ba-tinyPubSub.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ui.ipad.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.global.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Date.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Org.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Timeline.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_TimelineView.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/TG_Mediator.js" type="text/javascript" charset="utf-8"></script>
<script src="js/timeglider/timeglider.timeline.widget.js" type="text/javascript"></script>



<!--
js/underscore-min.js
js/backbone-min.js
js/jquery.tmpl.js
js/ba-debug.min.js
js/ba-tinyPubSub.js
js/jquery.mousewheel.min.js
js/jquery.ui.ipad.js
js/jquery.global.js
js/timeglider/TG_Date.js
js/timeglider/TG_Org.js
js/timeglider/TG_Timeline.js
js/timeglider/TG_TimelineView.js
js/timeglider/TG_Mediator.js
js/timeglider/timeglider.timeline.widget.js

js_output_file js/timeglider-0.1.3.min.js
-->

<!-- TESTING -->

<script type="text/javascript">

    /*
        window.namespacer = {
          clickCallback:function(obj) {
              alert("hello");
          }
      }
      */
    $(function () {

        var tg_actor = {};




        var tg1 = $("#p1").timeline({
            "timezone":"-07:00",
            "min_zoom":1,
            "max_zoom":52,
            "show_centerline":true,
            "data_source":"json_tests/js_history.json",
            "show_footer":true,
            "display_zoom_level":true
        }).resizable({
            stop:function(){
                $(this).data("timeline").resize();
            }
        });


        tg_actor = tg1.data("timeline");

        timeglider.methods = {
            zoomIn:function() { tg_actor.zoom("in"); }
        };


        // test to bring up filter by default, on load
        setTimeout(function() {
            $(".tg-timeline-legend-bt").trigger("click");
        }, 2000);


        $("#tags-button").bind("click", function() {
            var txt = $("#tags-input").val();
            tg_actor.filterBy("tags", txt);
        });



    }); // end document-ready







</script>







<!--
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;callback=timeglider.googleMapsInit"></script></body></html>-->
